大屏可视化屏幕适配的几种方法 |
您所在的位置：网站首页 › echarts transform › 大屏可视化屏幕适配的几种方法 |
大屏可视化屏幕适配的几种方法
|
正文 方法一：利用css的transform属性以及设计百分比以及scal（）方法： 第一步：先写一个组件，width = 100vw,height = 100%,作为大屏展示的背景 .screen-adapter { width: 100vw; min-height: 100%; max-height: 100vh; overflow: hidden; background: url("../../assets/charts/icon-bg.png") no-repeat; background-size: 100% 100%; }第二步：根据设计同学提供的设计图可以计算出每部分区域的百分比，例如总尺寸是w*h，其中一个图标宽高是w1 * h1，实现常规切图，此时由1-->2可得： export default { name: 'ScreenAdapter', data() { return { style: { width: `${this.w}px`, height: `${this.h}px`, transform: 'scale(1) translate(-50%, -50%)', // 默认不缩放，垂直水平居中 }, }; }, props: { w: { // 设计图尺寸宽 type: Number, default: 1600, }, h: { // 设计图尺寸高 type: Number, default: 1200, }, }, }; .screen-adapter { width: 100vw; min-height: 100%; max-height: 100vh; overflow: hidden; background: url("../../assets/charts/icon-bg.png") no-repeat; background-size: 100% 100%; .content-wrap { transform-origin: 0 0; position: absolute; top: 50%; left: 50%; padding: 18px 64px; } }第三步：基于第二步，需要根据大屏具体尺寸计算缩放比例，以及设置缩放比例，需要注意的是，绑定resize事件一定别忘了防抖，页面销毁别忘了移除监听事件： export default { name: 'ScreenAdapter', data() { return { style: { width: `${this.w}px`, height: `${this.h}px`, transform: 'scale(1) translate(-50%, -50%)', // 默认不缩放，垂直水平居中 }, }; }, props: { w: { // 设计图尺寸宽 type: Number, default: 1600, }, h: { // 设计图尺寸高 type: Number, default: 1200, }, }, mounted() { this.setScale(); this.onresize = this.debounce(() => this.setScale(), 100); window.addEventListener('resize', this.onresize); }, methods: { // 防抖 debounce(fn, t) { const delay = t || 500; let timer; // eslint-disable-next-line func-names return function () { // eslint-disable-next-line prefer-rest-params const args = arguments; if (timer) { clearTimeout(timer); } const context = this; timer = setTimeout(() => { timer = null; fn.apply(context, args); }, delay); }; }, // 获取缩放比例 getScale() { console.log(window.innerHeight, window.innerWidth); const w = window.innerWidth / this.w; const h = window.innerHeight / this.h; return w < h ? w : h; }, // 设置缩放比例 setScale() { this.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`; }, }, beforeDestroy() { window.removeEventListener('resize', this.onresize); }, }; .screen-adapter { width: 100vw; min-height: 100%; max-height: 100vh; overflow: hidden; background: url("../../assets/charts/icon-bg.png") no-repeat; background-size: 100% 100%; .content-wrap { transform-origin: 0 0; position: absolute; top: 50%; left: 50%; padding: 18px 64px; } }第四步：到这大部分已经完成，只要往插槽放组件就行了  data文件夹下各个.vue的解释： chart.vue是数据可视化页面； ScreenAdapter.vue是页面自适应组件； Card.vue是每个图表的外框； 其他的都是每一个图表 Chart.vue页面如下：  页面适配效果如下2000*1500  1600*1200  方法二：大屏vw和vh适配方案： 常见的屏幕分辨率 1280 * 720： 老式电脑的屏幕，目前很少见到1366 * 768 ： 普通液晶显示器1920 * 1080： 高清液晶显示器2560 * 1440： 2K高清显示器3840 * 2160： 4K高清显示器自适应的难点 要兼容不同屏幕尺寸的分辨率让页面在不同分辨率的屏幕下都保持正常的显示效果和比例不同分辨率，显示场景不同，不能固定写死px单位一些图表的自适应方式需要特别处理关于vw和vh 屏幕视口宽度 = 100vw屏幕视口高度 = 100vhvw和vh也是css中标准的单位，和px,rem, %一样vw和vh适配方案 按照设计稿的尺寸，将px按比例计算转为vw和vh转换公式如下` 假设设计稿尺寸为1920*1080（做之前一定问清楚UI设计稿的尺寸） 即： 网页宽度=1920px 网页高度=1080px 我们都知道 网页宽度=100vw 网页宽度=100vh 所以，在1920x*1080px的屏幕分辨率下 1920px = 100vw 1080px = 100vh 这样一来，以一个宽300px和200px的div来说，其作所占的宽高，以vw和vh为单位，计算方式如下: vwDiv = (300px / 1920px ) * 100vw vhDiv = (200px / 1080px ) * 100vh 所以，就在1920*1080的屏幕分辨率下，计算出了单个div的宽高 当屏幕放大或者缩小时，div还是以vw和vh作为宽高的，就会自动适应不同分辨率的屏幕但是每次都手动计算时不现实的，所以，我需要封装一个处理函数，让它帮我自动计算 这里我用到了scss 在src/styles下新建一个utils.scss文件，定义好设计稿的宽度和高度两个变量在这里使用scss内置的math.div函数，定义两个vw和vh的计算函数我们传入具体的像素值，其帮我们自动计算出vw和vh的值utils.scss 我们的大屏的宽高比为4:3； ` //使用scss的math函数，https://sass-lang.com/documentation/breaking-changes/slash-div @use "sass:math"; //默认设计稿的宽度 $designWidth:1600; //默认设计稿的高度 $designHeight:1200; //px转为vw的函数 @function vw($px) { @return math.div($px , $designWidth) * 100vw; } //px转为vh的函数 @function vh($px) { @return math.div($px , $designHeight) * 100vh; }使用方式 依赖项 使用前安装对应版本的node包 "sass": "^1.26.5","sass-loader": "^8.0.2",路径配置 我这里使用的是vue2.6和vue-cli3搭建的vue项目，所以，我只需要在vue.config.js里配置一下utils.scss的路径,就可以全局使用了 vue.config.js（只展示了与本方法有关的配置） const path = require('path'); const StyleLintPlugin = require('stylelint-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin'); const defaultSettings = require('./src/settings.js'); function resolve(dir) { return path.join(__dirname, dir); } const name = defaultSettings.title; // page title const port = process.env.port || process.env.npm_config_port || 8066; // dev port const devUrl = process.env.DEV_URL; // dev url module.exports = { publicPath: '/', outputDir: 'dist', assetsDir: 'static', lintOnSave: process.env.NODE_ENV === 'development', productionSourceMap: false, devServer: { port, open: true, overlay: { warnings: false, errors: true, }, proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { target: devUrl, changeOrigin: true, ws: false, }, }, }, configureWebpack: { // provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title. name, resolve: { alias: { '@': resolve('src'), }, }, performance: { maxEntrypointSize: 400000, maxAssetSize: 250000, }, }, css: { loaderOptions: { //全局配置utils.scss,详细配置参考vue-cli官网 sass: { prependData: '@import "@/styles/utils.scss";', }, less: { javascriptEnabled: true, }, }, }, };在.vue文件中使用 export default{ name: "Box", } /* 直接使用vw和vh函数，将像素值传进去，得到的就是具体的vw vh单位*/ .chart-wrapper{ width: vw(400); height: vh(300); font-size: vh(16); background-color: black; margin: vw(20); border: vh(2) solid red; } 特殊的使用情况有的时候可能不仅在.vue文件中使用，比如在js中动态创建的DOM元素 它可能是直接渲染到html里面的 let oDiv = document.createElement('div') document.body.appendChild(oDiv)这样的话，我用了以下两种处理方式,来给创建的div设置样式 1. 定义一些全局的class 新建一个global.scss文件，在main.js中引入 global.scss .global-div{ width: vw(300); height: vw(200); background-color: green; }main.js import './styles/global.scss'使用时，给创建的div设置className, let oDiv = document.createElement('div') oDiv.className = "global-div"2. 定义js样式处理函数 这种处理方式和scss处理函数类似，只不过使用了纯js将px转为vw和vh 新建一个styleUtil.js文件，内容如下 //定义设计稿的宽高 const designWidth = 1920; const designHeight = 1080; let styleUtil = { // px转vw px2vw: function (_px) { return _px * 100.0 / designWidth + 'vw'; }, // px转vh px2vh: function (_px) { return _px * 100.0 / designHeight + 'vh'; }, }; export default styleUtil;使用时，单独设置宽高等属性 import styleUtil from "./src/utils/styleUtil.js" let oDiv = document.createElement('div') oDiv.style.width = styleUtil.px2vw(300) oDiv.style.height = styleUtil.px2vh(200) oDiv.style.margin = styleUtil.px2vh(20)不过这种使用方式有种弊端，就是屏幕尺寸发生变化后，需要手动刷新一下才能完成自适应调整 该方法参考地址 方法三：可以使用DataV DataV具体使用方法可以参考 大家在使用过程中可以根据项目具体需求来选择哪种方法 |
【本文地址】